import React from 'react';
import ReactEcharts from '@/components/Echarts';
// import styles from '@/pages/Organization/Hr/index.less';

const getOption = data => ({
    visualMap: {
        min: 0,
        max: 100,
        left: 'left',
        top: 'bottom',
        text: ['高', '低'],
        calculable: false,
        orient: 'vertical',
        inRange: {
            color: ['#FFEFD1', '#FFA000']
        }
    },
    tooltip: {
        trigger: 'item',
        padding: 0,
        formatter(params) {
            const html = `<div style="padding:0;"><p style="text-align:center;color:#fff;font-size:16px;padding:5px 14px;margin:0;border-bottom:1px solid rgba(255,255,255,0.3);">${
                params.name
            }</p><div style="padding:14px;font-size:12px;"><i style="display: inline-block;vertical-align: middle;width:6px;height:6px;border-radius: 100%;margin-right:6px;background:${
                params.color
            }"></i><span style="color:#aaa;">${params.seriesName}：</span><span >${params.value ||
                0}</span></div></div>`;
            return html;
        }
    },
    series: [
        {
            name: '员工数量',
            type: 'map',
            mapType: 'asian',
            itemStyle: {
                normal: {
                    label: {
                        show: false
                    },
                    borderColor: '#fff'
                },
                emphasis: {
                    label: {
                        show: false
                    }
                }
            },
            data
        }
    ]
});

const YgjgSg = ({ data }) => <ReactEcharts option={getOption(data)} />;

export default YgjgSg;
